<script setup>
import { ref } from 'vue'
import Basic from './Basic'
import Basic2 from './Basic2'
import UserCom from './User'
import Goods from './Goods'
import Pay from './Pay'
import Son from './Son'
import ContractCom from './Contract'
import SettleCom from './Settle'
import Deliver from '../Deliver'
import { service } from '@utils'
import { usePremission } from '@hooks'

const props = defineProps({
    statuss: Array,
    expressMethods: Array,
    expressCompanys: Array,
    yesNo: Array,
    sonStatuss: Array,
    newOrOldData:Array
})
const visible = ref(false)
const data = ref()
const user = ref()
const contract = ref()
const settle = ref()

const deliverRef = ref()


    const premission = usePremission({
        wuliu: 'bfqz:order:wuliu'
    })

const open = async (value) => {
    getGoodsDetail(value.orderId)
    visible.value = true
    // getUser()
    // getContract()
    // getSettle()
}

const close = () => {
    visible.value = false
    data.value = null
    user.value = null
    contract.value = null
    settle.value = null
}
const getGoodsDetail = async (id)=>{
    const res = await service.bfqz.cancelOrderDetail({orderId:id})
    data.value = res.data
}
const getUser = async () => {
    const res = await service.bfqz.userInfoAll(data.value.userId)
    user.value = res
}

const getContract = async () => {
    const res = await service.bfqz.contractByOrder(data.value.id)
    contract.value = res
}

const getSettle = async () => {
    const res = await service.bfqz.settleByOrder(data.value.id)
    if (res && res.id) {
        settle.value = res
    }
}
//把方法暴露给父组件
defineExpose({
    open
})
</script>
    
<template>
    <el-dialog v-model="visible" title="详情" center @close="close" :fullscreen="true" destroy-on-close :width="900">
        <el-tabs type="card" class="demo-tabs" v-if="data">
            <el-tab-pane label="订单基本信息">
                <div class="titleText">
                    <p></p>
                    订单基本信息
                </div>
                <basic :data="data" :statuss="statuss" :expressMethods="expressMethods" :expressCompanys="expressCompanys" />
                 <el-button 
                    v-if="premission.wuliu && data.state == '8' ||
                    premission.wuliu && data.state == '9' ||
                    premission.wuliu && data.state == '12' ||
                    premission.wuliu && data.state == '16' ||
                    premission.wuliu && data.state == '17'" 
                 style="margin: 0 auto;" type="primary" @click="deliverRef.open(data, 2)">查看物流详情</el-button>
                <div class="titleText" v-if="data.bizContract && data.bizContract.signStatus == 2">
                    <p></p>
                    合同信息
                </div>
                <contract-com v-if="data.bizContract && data.bizContract.signStatus == 2" :contract="data.bizContract" />
                 <div class="titleText">
                    <p></p>
                    用户收货地址
                </div>
                 <user-com v-if="data" :data="data"/>
                 <div class="titleText">
                    <p></p>
                    商品详情
                </div>
                 <goods :data="data" :yesNo="yesNo" :newOrOldData="newOrOldData"/>
                 <div class="titleText">
                    <p></p>
                    订单支付信息
                </div>
                 <pay :data="data" />
                 <div class="titleText" v-if="settle">
                    <p></p>
                    结算单信息
                </div>
                 <settle-com v-if="settle" :settle="settle" />
                 <div class="titleText">
                    <p></p>
                    交付确认单
                </div>
                 <Basic2 :data="data"  />
            </el-tab-pane>
            <!-- <el-tab-pane v-if="contract && contract.state == 1" :label="'合同信息' + contract.state">
                <contract-com v-if="data" :contract="contract"/>
            </el-tab-pane>
            <el-tab-pane label="用户收货地址">
                <user-com v-if="data" :data="data"/>
            </el-tab-pane>
            <el-tab-pane label="商品详情">
                <goods :data="data" :yesNo="yesNo" />
            </el-tab-pane>
            <el-tab-pane label="订单支付信息">
                <pay :data="data" />
            </el-tab-pane>
            <el-tab-pane v-if="settle" label="结算单信息">
                <settle-com :settle="settle" />
            </el-tab-pane> -->
            <el-tab-pane label="子订单信息">
                <son :data="data" :statuss="sonStatuss" />
            </el-tab-pane>
            <!-- <el-tab-pane label="交付确认单" v-if="data.state - 0 > 7 && data.state != 14 && data.state != 15">
                <Basic2 :data="data"  />
            </el-tab-pane> -->
        </el-tabs>
            <Deliver
            ref="deliverRef" :data="data" :showBuyPriceValue="2"  />
            
    </el-dialog>
</template>
<style lang="scss" scoped>
.titleText{
    text-indent: 10px;
    height: 20px;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin: 20px 0;
    p{
        width: 4px;
        height: 100%;
        background: #FF554B;
        display: inline-block;
        border-radius: 5px;
    }
}
:deep(.el-tabs__header){
    padding-bottom: 20px;
    border-bottom: 1px solid #E4E4E4 !important;
}
:deep(.el-tabs__nav){
    // border-bottom: 1px solid #FF554B !important;
    border: none !important;
}
:deep(.el-tabs__item){
    // height: 30px !important;
    // line-height: 30px !important;
    border: 1px solid #FF554B !important;
    border-right: none  !important;
    color: #343840;
}
:deep(.el-tabs__item:first-child){
    border-right: 1px solid #FF554B !important;
    border-radius: 4px 0 0 4px !important;
}
:deep(.el-tabs__item:last-child){
    border-right: 1px solid #FF554B !important;
    border-radius: 0 4px 4px 0 !important;
}
:deep(.el-tabs__item:hover){
    color: #303133;
}
:deep(.is-active){
    background: #FF554B;
    color: #fff;
}
:deep(.is-active:hover){
    color: #fff;
}
</style>
    